float:left блоки равной высоты в несколько строк

AKyHuH · January 12, 2010

Добрый день, уважаемые форумчане!

Делаю сайт, левая колонка фиксированной ширины, правая (контент) резиновая. В правой колонке выводится список изображений с заголовками:

css:

.img {

width: 200px;

float: left;

margin: 0 10px 10px 0;

}

html:

<h3>Title</h3>

</div>

<h3>Title</h3>

</div>

...

<h3>Title</h3>

</div>

в итоге зрительно должно получиться подобие таблицы, где по ширине экрана выстраивается столько изображений, сколько позволяет экран, остальные переходят на следующую строку, потом на следующую и т.д. И все хорошо, пока высота колонок физически одинаковая, но как, например, заголовок одного изображения становится длиннее и занимает несколько строк вся картина нафиг портится... Выход пока вижу только один, каким-то образом сделать высоту всех равной высоте самой высокой, но как этого добиться... в этом собственно и сам вопрос.

Edited January 12, 2010 by AKyHuH

s0rr0w · January 12, 2010

Выход пока вижу только один, каким-то образом сделать высоту всех равной высоте самой высокой, но как этого добиться... в этом собственно и сам вопрос.

JS

AKyHuH · January 12, 2010

Пока хотелось бы попробовать обойтись средствами css и html

rus · January 12, 2010

Выход пока вижу только один, каким-то образом сделать высоту всех равной высоте самой высокой, но как этого добиться... в этом собственно и сам вопрос.

Либо сделать все одинаковой строго заданной высоты и не допускать длинных заголовков.

AKyHuH · January 12, 2010

Никогда не считал ограничение функционала выходом из ситуации

psywalker · January 12, 2010

а дисплей-инлайн-блок чем не угодил?

AKyHuH · January 12, 2010

поподробнее пожалуйста

Edited January 12, 2010 by AKyHuH

rus · January 12, 2010

а дисплей-инлайн-блок чем не угодил?

по моему это равносильно вайт-спейс:новрап, ни разу не то.

Edited January 12, 2010 by rus

Great Rash · January 12, 2010

Ребята вы что, это ж сто раз обсуждалось...

колонки одинаковой высоты

AKyHuH · January 12, 2010

это не совсем обычная ситуация... тут колонки ещё и в несколько строк и ни один "хак" который попался мне в поисковиках не заработал должным образом

psywalker · January 12, 2010

по моему это равносильно вайт-спейс:новрап, ни разу не то.

Почему не то? Список с одинаковыми колонками, как таблица, как раз самое оно. Позже решение покажу.

Ребята вы что, это ж сто раз обсуждалось...
колонки одинаковой высоты

Нет дружище, это слишком.

rus · January 12, 2010

Почему не то? Список с одинаковыми колонками, как таблица, как раз самое оно. Позже решение покажу.

Просто заголовки будут вытягиваться в строку и не переноситься, ведь так?

Тогда получится что изображение маленькое, название длинное и если у блока еще есть границы, то вообще жесть как будет выглядеть.

AKyHuH · January 12, 2010

Почему не то? Список с одинаковыми колонками, как таблица, как раз самое оно. Позже решение покажу.

очень интересно посмотреть, потому что я пока не понял как дисплей-инлайн-блок может помочь в решении, ведь по сути это свойство лишь заставляет строчные элементы вести себя как блочные... но блочные элементы совсем не обязаны растягиваться по высоте друг-друга, напротив, им этого совершенно не хочется делать

Great Rash · January 12, 2010

Во, теперь понял...

пожалуй для ИЕ6,7 я бы написал скрипт, а для остальных - display: table-cell;

psywalker · January 12, 2010

Ребят смотрите, в общем Дисплей-инлайн блок поможет, но видимо не совсем.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	ul { list-style: none;}
		ul li {
			display: inline-block;
			width: 200px; 
			background: red;
			margin-bottom: 10px;
			vertical-align: top;
		}
		ul li p { padding: 10px;}
</style>
</head>

<body>

	<ul>
		<li>
			  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

		</li>
		<li>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

		</li>
		<li>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

		</li>
		<li>  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></li>
		<li>  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></li>
		<li>t</li>
		<li>t</li>
		<li>t</li>
	</ul>

AKyHuH · January 12, 2010

Просто заголовки будут вытягиваться в строку и не переноситься, ведь так?
Тогда получится что изображение маленькое, название длинное и если у блока еще есть границы, то вообще жесть как будет выглядеть.

не, насколько я понял psywalker вообще предлагает использовать плоский список <ul><li> со свойством для элементов списка inline-block... только что дошло о чем он говорит, но пока я не попробовал это в браузере не могу представить будут ли при этом все элементы списка одинаковой высоты...

rus · January 12, 2010

Макс, ну ты даешь... речь о дивах идет, а ты зачем то тут списки привел.

Хотя списками могет и лучше.

Edited January 12, 2010 by rus

psywalker · January 12, 2010

Макс, ну ты даешь... речь о дивах идет, а ты зачем то тут списки привел.

Нее, ну ладно, ладно, чё вы сразу начинаете-то...

Решение проблемы Вставь код в браузер, я попой чую, это оно.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	 <title>sameHeight</title>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <style type="text/css">
	 <!--
	 body{
		  margin:0; background: #033;
	 }
	 .box{
		  float:left;
		  width: 200px;
		  margin-left: 2%;

	 }


	 p { padding: 0 10px;}
	 -->
	 </style>
	 <script type="text/javascript">
	 <!--
	 function initScript(){
		  startSameHeight();
		  window.onresize=function(){startSameHeight()};
	 }
	 function startSameHeight(){
		  sameHeight({
			   tagName:'div',
			   tagClass:'box'
		  });
		  sameHeight({
			   tagName:'div',
			   tagClass:'block'
		  });
		  sameHeight({
			   tagName:'span',
			   tagClass:'element'
		  });
	 }

	 function sameHeight(_options){
		  var _tagName=_options.tagName;
		  var _tagClass=_options.tagClass;
		  var maxHeight=0;
		  var _elements=document.getElementsByTagName(_tagName)
		  var re=eval('/'+_tagClass+'\\'+'b/');

		  if(_elements){
			   for(var i=0;i<_elements.length;i++){
					if(re.test(_elements[i].className)){
						 _elements[i].style.height='auto';
						 if(_elements[i].offsetHeight>=maxHeight){
							  maxHeight=_elements[i].offsetHeight;
						 }
					}
			   }
			   for(var i=0;i<_elements.length;i++){
					if(re.test(_elements[i].className)){
						 _elements[i].style.height=maxHeight+'px';
					}
			   }
		  }
	 }

	 if(window.addEventListener){
		  window.addEventListener("load",initScript,false);
	 }else if(window.attachEvent){
		  window.attachEvent("onload",initScript);
	 }
	 //-->
	 </script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">

		  <p>t</p>
	 </div>
	 <div class="box" style="background:#c33">
		  <p>Lorem ipsum dolor sit amet consectetuer sem tempus tortor hac nunc. Orci Sed dolor parturient In eget parturient sit Nullam ante elit. Non nec Nam tincidunt augue.</p>
	 </div>
	 <div class="box" style="background:#33c">
		  <p>Lorem ipsum dolor sit amet consectetuer nulla vel tincidunt urna semper. Vestibulum turpis tincidunt gravida eros vel Phasellus nunc sodales tempor dictumst. Nec nec id.</p>
		  <p>Ridiculus est Maecenas Phasellus est In sed augue Suspendisse ante ac. Nulla volutpat Vestibulum Vestibulum odio id ullamcorper non dignissim tellus justo. Ut sed.</p>


	 </div>
	 <div class="box" style="background:#3c3">
		  <p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		  <p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
	 </div>
	 <div class="box" style="background:#3c3">
		  <p>Lorem ipsum dolor sit amet consectetuer et Vestibulum ac nibh eu. Phasellus.</p>
		  <p>Tincidunt Curabitur Vestibulum semper enim Cras ut laoreet Nulla mattis Integer. Magna laoreet eu libero pellentesque morbi ut euismod at neque sed. Leo vel tellus et.</p>
	 </div>
</div>
<!-- end wrapper -->
</body>
</html>

AKyHuH · January 12, 2010

Макс, ну ты даешь... речь о дивах идет, а ты зачем то тут списки привел.
Хотя списками могет и лучше.

не, ну зачем же так категорично можно и списки... ))

Ребят смотрите, в общем Дисплей-инлайн блок поможет, но видимо не совсем.

Почему не совсем? пока не дошло...

psywalker · January 12, 2010

не, ну зачем же так категорично можно и списки... ))
Почему не совсем? пока не дошло...

Ты лучше все коды в браузерах проверь, там сразу дойдёт, а то так думать будешь два года)))

aTei · January 12, 2010

AKyHuH, чтобы вылечится от такой штуки, добавь в CSS overflow: hidden;

Пример,

<div class="img">
1234512345123441235 
12345 12345 12345 12345 12345 
12345 12345 12345 12345 12345 
12345 12345 12345 12345 12345 
12345 12345 12345 12345 12345 
</div>

Без overflow:

C overflow:

AKyHuH · January 12, 2010

не, JS сразу не подходит... я пипец как по кросс-браузерности страдаю, а JS отключен бывает ещё чаще, чем человек заходит с FF2...

а по поводу списка, там проблема только в том, что фон не растягивается по высоте? или я чего-то ещё не заметил?

AKyHuH, чтобы вылечится от такой штуки, добавь в CSS overflow: hidden;

а это тут при чем?

Edited January 12, 2010 by AKyHuH

Great Rash · January 12, 2010

а JS отключен бывает ещё чаще, чем человек заходит с FF2

не поверю никогда

psywalker · January 12, 2010

не, JS сразу не подходит... я пипец как по кросс-браузерности страдаю, а JS отключен бывает ещё чаще, чем человек заходит с FF2...
а по поводу списка, там проблема только в том, что фон не растягивается по высоте? или я чего-то ещё не заметил?

1) Насчёт скрипта его можно в отдельный файл убрать, а так ЦСС вообще мизер.

Скрипты уже не отключают как 100 лет, это наверное остались осадки от былых времён. ФФ2 в самых оптимистических статистиках занимает 0.7% посещаемости в месяц.

а это тут при чем?

2) Не причём, видимо он не понял вопроса. Кстати на спамера смахивает, давно его приметил уже.

не поверю никогда

Я сам не верю друг.

AKyHuH · January 12, 2010

JS отключают параноидальные админы корпоративных сетей...

aTei · January 12, 2010

Ладно, если не понял, объясните плз

Человек сказал, что у него верстка сыпется из-за появления второй строки заголовка в блоке, я подумал что вполне хорошим решением будет скрыть то, что вылазит за объемы блока.

Если же не скрывать то, что больше нужного размера, нужно использовать inline-block. Его кроссбраузерный код:

		width: 200px;
		min-height: 250px;
		border: 1px solid #000;
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		margin: 5px;
		zoom: 1;
		*display: inline;
		_height: 250px;

Как будет выглядеть:

ПС: надеюсь в этот раз предложил правильное решение

Edited January 12, 2010 by aTei

Sign In

float:left блоки равной высоты в несколько строк

Question

Link to comment

Share on other sites

46 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information